<template>
    <div>
        
        <testheader></testheader>
        
        <input type="text" v-model="message" />
        <br>

        {{message}}
        <br><br>

        {{reverse_message}}

        <br>

        千米：<input type="text" v-model="kilometers" />
        米：<input type="text" v-model="meters" />
    
        <br><br>

        <div v-show="flag">

            你能看见我

        </div>

        <br><br>
        <div v-if="num==9">

            num == 9

        </div>

        <div v-else-if="num==10">

            num == 10

        </div>
        <div v-else>
            num != 9 && num != 10
        </div>

        <br><br>


        <div>
            <table>

                <tr>

                <td v-for="(item,index) in tlist" :class="{on:index%2==0,off:index%2!=0}">

                    {{item.text}}

                </td>

            </tr>

            </table>
            

            <br><br>

            <table>

                <tr v-for="(item, index) in datalist">
                    <td>

                        {{item.name }}

                    </td>

                    <td>
                        
                        <button @click="minus(index)">-</button>
                        <input type="text" v-model="item.num" />
                        <button @click="add(index)">+</button>

                    </td>

                </tr>

            </table>

            <button @click="add_cart('宝马')">添加宝马</button>
            <button @click="add_cart('电脑')">添加电脑</button>
            <br>
            {{ totalCount() }}
        </div>
    
    </div>

</template>



<script>

    //导入子组件
    import testheader from "./testheader"

    export default {
        data(){
            return{
                message:"hello word!",
                kilometers:0,
                meters:0,
                flag:false,
                num:10,
                tlist:[{text:"汽车"},{text:"饮料"},{text:"挖掘机"},{text:"飞机"}],
                datalist:[],
            }
        },
        //定义组件标签
        components:{
            'testheader':testheader
        },
        //自定义方法
        methods:{
            //汇总商品数量
            totalCount:function(){

                //默认数量为0
                let total = 0;
                //遍历
                for(let i=0,l=this.datalist.length;i<l;i++){
                    total += this.datalist[i].num;
                }
                return total;
            },
            //减少商品数量
            minus:function(index){
                if (this.datalist[index].num>0){
                    this.datalist[index].num--;
                }
            },
            //增加商品数量
            add:function(index){
                this.datalist[index].num++;
            },
            //添加购物车
            add_cart:function(name){
                //声明购物车变量
                let cartlist = this.datalist;
                //声明坐标
                let findgood = 0;
                //遍历购物车列表
                for(let i=0,l=cartlist.length;i<l;i++){
                    //判断逻辑
                    if(name == cartlist[i]['name']){

                        cartlist[i]['num']++;
                        findgood = 1;
                        break;
                    }
                }
                if(findgood==0){
                    cartlist.push({name:name, num:1});
                }
                //重新赋值
                this.datalist = cartlist;
            }
        },

        //钩子方法
        mounted:function(){
            console.log("这是初始化方法")
        },

        //计算属性
        computed:{
            reverse_message:function(){
                //反转逻辑
                return '$'+this.message.split('').reverse().join('')
            }
        },
        //监听属性
        watch:{
            kilometers: function(val){
                this.kilometers = val;
                this.meters = val * 1000;
            }, 
            meters: function(val){
                this.kilometers = val / 1000;
                this.meters = val
            }
        }
    }
</script>

<style>

    .on { background: rebeccapurple}
    .off {background: red}

</style>
